#include('../header.html', {title: '安全设置'})
<style>
  .cd-form-group input {
    padding: 4px 6px;
    border-radius: 5px;
    border: 1px solid #cdcdcd;
  }
</style>
<div class="container cd-container">
  <div class="cd-content">
    <div>
      #include('sideMenu.html', {type: 'set', name: '安全设置'})
    </div>
    <div class="cd-main">
      <div class="cd-main__heading">
        <div class="cd-main__title">
          更改密码
        </div>
      </div>
      <div class="cd-main__body">
        <form id="user-profile-form" @submit.prevent="re_password()" class="row cd-row"
              method="post" novalidate="novalidate">
          <div class="col-md-6  col-md-offset-1">
            <div class="form-group cd-form-group">
              <span for="profile_oldpass">请填写旧密码 :</span>
              <input id="profile_oldpass" type="password" required="required" v-model="user.password"
                     placeholder="旧密码">
            </div>
            <div class="form-group cd-form-group">
              <span for="profile_newpass">请填写新密码 :</span>
              <input id="profile_newpass" type="password" v-model="user.newpass"
                     required="required"
                     placeholder="新密码">
            </div>
            <div class="form-group cd-form-group">
              <span for="profile_repass">请确认新密码 :</span>
              <input id="profile_repass" type="password" required="required"
                     placeholder="重复密码">
            </div>
            <div class="col-md-11">
              <button id="profile-save-btn" type="submit"
                      class="btn cd-btn cd-btn-primary cd-btn-lg">保存更改
              </button>
              <!--data-loading="正在更改..."-->
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var userVm = new Vue({
    el: '#user-profile-form',
    data: {
      user: {
        id: ${user.id},
        password: null,
        newpass: null,
      }
    },
    methods: {
      re_password: function () {
        if ($('#profile_newpass').val() !== $('#profile_repass').val()) {
          layer.msg('两次密码输入不一致，请重新确认输入密码！', {icon: 5});
          return false;
        }
        $.post("/user/updatePassword", {
          id: this.user.id,
          password: this.user.password,
          newpass: $('#profile_newpass').val()
        }, function (data) {
          if (data.success) {
            layer.load({time: 1500});
            window.setTimeout(function () {
              $.post('/user/logout', function (data) {
                location.href = '/login';
              });
            }, 2000);
            window.setTimeout(function () {
              layer.msg('修改成功', {icon: 6});
            }, 1500);
          } else {
            layer.msg(data.msg, {icon: 5});
          }
        })
      }
    }
  });
</script>

#include('../footer.html')